<template>
	<VerticalSplitLayout>
		<template #top>
			<el-form :model="dataForm" :rules="dataRules" ref="dataFormRef" v-loading="loading">
				<el-descriptions class="mb-2" icon :column="1" border>
					<template #title>
						<el-text size="large" class="font-black">
							<el-icon color="rgb(51.2, 126.4, 204)">
								<Printer />
							</el-icon>
							补打内容
						</el-text>
					</template>

					<!--region 盘点单信息-->
					<el-descriptions-item label-align="center" label="盘点信息" min-width="180px">
						<template #label>
							<el-text> <el-icon>
									<Calendar />
								</el-icon> 盘点信息 </el-text>
						</template>
						<el-row :gutter="20">
							<el-col :span="12">
								<el-form-item :label="$t('makeUp.makeUpNo')" prop="billCode" label-width="100px">
									<CheckStockHSelect v-model="dataForm.billCode" :query-params="{ status: 'Checking', checkStockTimeStart: currentMonthFirstDay}">
									</CheckStockHSelect>
									<!--<el-select v-model="dataForm.billCode" placeholder="Select" filterable @change="makeUpNoChange">-->
									<!--	<el-option :key="item.id" :label="item.billCode" :value="item.billCode" v-for="item in makeUpNoOptions">-->
									<!--		<span style="float: left">{{ item.billCode }}</span>-->
									<!--		<span style="float: left; margin-left: 10px">{{ item.warehouseCode }}</span>-->
									<!--		<span style="float: left; margin-left: 10px">{{ item.warehouseName }}</span>-->
									<!--	</el-option>-->
									<!--</el-select>-->
								</el-form-item>
							</el-col>
							<el-col :span="12">
								<el-form-item :label="$t('makeUp.materialCode')" prop="materialCode"
									label-width="100px">
									<MaterialSelect v-model="dataForm.materialCode" @change="materialChange">
									</MaterialSelect>
									<!--<el-select v-model="dataForm.materialCode" placeholder="Select" filterable @change="materialChange">-->
									<!--	<el-option :key="item.id" :label="item.materialCode" :value="item.materialCode" v-for="item in materialCodeOptions">-->
									<!--		<span style="float: left">{{ item.materialCode }}</span>-->
									<!--		<span style="float: left; margin-left: 10px">{{ item.realMaterialName }}</span>-->
									<!--		<span style="float: left; margin-left: 10px">{{ item.specification }}</span>-->
									<!--	</el-option>-->
									<!--</el-select>-->
								</el-form-item>
							</el-col>
						</el-row>
					</el-descriptions-item>
					<!--endregion-->

					<!--region 物料信息-->
					<el-descriptions-item label-align="center" :span="2">
						<template #label>
							<el-text> <el-icon>
									<CreditCard />
								</el-icon> {{ $t('makeUp.materialMsg') }}</el-text>
						</template>

						<el-row :gutter="20">
							<el-col :span="6" class="">
								<el-form-item :label="$t('makeUp.materialCode')" prop="materialCode"
									label-width="100px">
									<el-input v-model="dataForm.materialCode" clearable disabled />
								</el-form-item>
							</el-col>
							<el-col :span="6" class="">
								<el-form-item :label="$t('makeUp.materialSpec')" prop="materialSpec"
									label-width="100px">
									<el-input v-model="dataForm.materialSpec" clearable disabled />
								</el-form-item>
							</el-col>
							<el-col :span="6" class="">
								<el-form-item :label="$t('makeUp.materialName')" prop="materialName"
									label-width="100px">
									<el-input v-model="dataForm.materialName" clearable disabled />
								</el-form-item>
							</el-col>
							<el-col :span="6" class="">
								<el-form-item :label="$t('makeUp.unit')" prop="unit" label-width="100px">
									<el-input v-model="dataForm.unit" clearable disabled />
								</el-form-item>
							</el-col>
						</el-row>
					</el-descriptions-item>
					<!--endregion-->

					<!--region 仓库信息-->
					<el-descriptions-item label-align="center">
						<template #label>
							<el-text><el-icon>
									<House />
								</el-icon> {{ $t('makeUp.warehouseMsg') }}</el-text>
						</template>
						<el-row :gutter="20" align="middle">
							<el-col :span="6" class="mb-1">
								<el-form-item :label="$t('makeUp.warehouseCode')" prop="warehouseCode"
									label-width="100px">
									<el-select v-model="dataForm.warehouseCode" placeholder="Select"
										@change="warehouseChange">
										<el-option :key="ds.id" :label="ds.warehouseCode" :value="ds.warehouseCode"
											v-for="ds in warehouseCodeOptions"></el-option>
									</el-select>
								</el-form-item>
							</el-col>
							<el-col :span="6" class="">
								<el-form-item :label="$t('makeUp.locationCode')" prop="locationCode"
									label-width="100px">
									<el-select v-model="dataForm.locationCode" placeholder="Select"
										@change="locationChange">
										<el-option :key="ds.id" :label="ds.locationCode" :value="ds.locationCode"
											v-for="ds in locationCodeOptions"></el-option>
									</el-select>
								</el-form-item>
							</el-col>
							<el-col :span="6" class="">
								<el-form-item :label="$t('makeUp.quantity')" prop="stockQty" label-width="100px">
									<el-input v-model="dataForm.stockQty" clearable :placeholder="$t('makeUp.quantity')"
										type="number" />
								</el-form-item>
							</el-col>
							<el-col :span="6" class="">
								<el-form-item :label="$t('makeUp.batchNumber')" prop="batchNumber" label-width="100px">
									<el-input v-model="dataForm.batchNumber" clearable
										:placeholder="$t('makeUp.batchNumber')" />
								</el-form-item>
							</el-col>
							<el-col :span="6" class="">
								<el-form-item :label="$t('makeUp.reprintType')" prop="reprintType" label-width="100px">
									<el-select v-model="dataForm.reprintType" placeholder="Select">
										<el-option :key="ds.id" :label="ds.label" :value="ds.value"
											v-for="ds in reprintTypeOptions"></el-option>
									</el-select>
								</el-form-item>
							</el-col>
						</el-row>
					</el-descriptions-item>
					<!--endregion-->

					<!--region 打印机 选择-->
					<el-descriptions-item label-align="center">
						<template #label>
							<!--<el-text type="primary"><el-icon><Operation /></el-icon> 操作</el-text>-->
							<!-- <SvgIcon name="printer" :size="24" class="mr-1 " ></SvgIcon> -->
							<img style="width:24px;height:24px; margin-left:43%" src="/@/assets/icons/printer.svg"
								:size="24" class="mr-1 " />
						</template>
						<el-row :gutter="20">
							<el-col :span="6">
								<el-form-item :label="$t('makeUp.printer')" prop="printerName" label-width="100px">
									<el-select v-model="dataForm.printerName" placeholder="Select"
										@change="printerChange">
										<el-option :key="ds.id" :label="ds.value" :value="ds.value"
											v-for="ds in printerOptions"></el-option>
									</el-select>
								</el-form-item>
							</el-col>
							<el-col :span="6">
								<el-button type="primary" icon="Printer" @click="onOpenDetail">

									{{ $t('makeUp.print') }}
								</el-button>
							</el-col>
						</el-row>
					</el-descriptions-item>
					<!--endregion-->
				</el-descriptions>
			</el-form>
		</template>
		<template #bottom>
			<MenuDialog @refresh="reset" ref="menuDialogRef" />
			<makeupList ref="makeUpListRef" />
		</template>
	</VerticalSplitLayout>
</template>
<script setup lang="ts">
import { useI18n } from 'vue-i18n';

const { t } = useI18n();

import { getPrinter } from '/@/api/platform/wms/sp';
import { getCheckMaterials, getMakeUpNos, getWarehouse, getLocations, print } from '/@/api/platform/wms/makeUp';
import makeupList from './makeupList.vue';
import { useMessage } from '/@/hooks/message';
import VerticalSplitLayout from '/src/components/VerticalSplitLayout/index.vue';
import MaterialSelect from "/@/components/mes/select/MaterialSelect.vue";
import CheckStockHSelect from "/@/components/mes/select/CheckStockHSelect.vue";
const MenuDialog = defineAsyncComponent(() => import('./form.vue'));
const loading = ref(false);
const dataFormRef = ref();
const makeUpListRef = ref();

const dataForm = reactive({
	batchNumber: '1',
	stockQty: 1,
	materialName: "",
});
const dataRules = ref({
	billCode: [{ required: true, message: t('makeUp.makeUpNoCannotEmpty'), trigger: 'blur' }],
	materialCode: [{ required: true, message: t('makeUp.materialCodeCannotEmpty'), trigger: 'blur' }],
	warehouseCode: [{ required: true, message: t('makeUp.warehouseCodeCannotEmpty'), trigger: 'blur' }],
	locationCode: [{ required: true, message: t('makeUp.locationCodeCannotEmpty'), trigger: 'blur' }],
	stockQty: [{ required: true, message: t('makeUp.quantityCannotEmpty'), trigger: 'blur' }],
	batchNumber: [{ required: true, message: t('makeUp.batchNumberCannotEmpty'), trigger: 'blur' }],
	reprintType: [{ required: true, message: t('makeUp.reprintTypeCannotEmpty'), trigger: 'blur' }],
});
//打印机列表
const printerOptions = ref();
const materialCodeOptions = ref();
const makeUpNoOptions = ref();
const warehouseCodeOptions = ref();
const locationCodeOptions = ref();
const printName = ref();
// 初始化数据
onMounted(() => {
	getPrinter({ code: 'printerSetup', text: '' }).then((res) => {
		printerOptions.value = res.data;
	});
	//物料
	getCheckMaterials().then((res) => {
		materialCodeOptions.value = res.data;
	});
	//盘点单号
	getMakeUpNos().then((res) => {
		makeUpNoOptions.value = res.data.records;
	});
	//仓库
	getWarehouse().then((res) => {
		warehouseCodeOptions.value = res.data;
	});
});
const reprintTypeOptions = ref([
	{ label: t('makeUp.rawMaterialBarcode'), value: 'RawMaterial' },
	{ label: t('makeUp.semiFinishedMaterialBarcode'), value: 'SemiFinishMaterial' },
]);
const materialChange = (row) => {
	console.log(row)
	if (!row) {
		dataForm.materialSpec = null;
		dataForm.materialName = null;
		dataForm.materialId = null;
		dataForm.unit = null;
		return;
	}
	let filteredMaterial = materialCodeOptions.value.filter((material) => material.materialCode == row.materialCode);
	dataForm.materialSpec = filteredMaterial[0].specification
	dataForm.materialName = filteredMaterial[0].materialName
	dataForm.unit = filteredMaterial[0].unit
	dataForm.materialId = filteredMaterial[0].id
};
const getFirstDayOfCurrentMonth = () =>{
  const now = new Date();
  const firstDay = new Date(now.getFullYear(), now.getMonth(), 1);
  // 可根据实际需求调整日期格式
  return firstDay.toISOString().split('T')[0];
};
const currentMonthFirstDay = getFirstDayOfCurrentMonth();
const warehouseChange = (value) => {
	let filteredWarehouse = warehouseCodeOptions.value.filter((warehouse) => warehouse.warehouseCode == value);
	dataForm.warehouseId = filteredWarehouse[0].id;
	dataForm.warehouseName = filteredWarehouse[0].warehouseName;
	dataForm.locationCode = null;
	//货位
	getLocations({ warehouseCode: value }).then((res) => {
		locationCodeOptions.value = res.data;
	});
};

const locationChange = (value) => {
	let filteredLocation = locationCodeOptions.value.filter((location) => location.locationCode == value);
	dataForm.locationId = filteredLocation[0].id;
	dataForm.locationName = filteredLocation[0].locationName;
	dataForm.locationCode = filteredLocation[0].locationCode;
};
//查询盘点记录
const makeUpNoChange = () => {
	makeUpListRef.value.query(dataForm.billCode);
};

const printerChange = (value) => {
	makeUpListRef.value.setPrintName(value);
	printName.value = value;
	dataForm.printName = value;
};
const menuDialogRef = ref();
// 打开确认窗口
const onOpenDetail = async () => {
	//const valid = await dataFormRef.value.validate().catch(() => {
	//});
	//if (!valid) return false;
	var data = dataForm;
	// console.log(data);
	menuDialogRef.value.openDialog(data);
};
//提交后清空字段信息
const reset = () => {
	makeUpNoChange();
};

</script>
<style scoped></style>
